<link href="<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH."css/facebox/facebox.css"; ?>" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH."js/facebox.js"; ?>"></script>
<script type="text/javascript" src="<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH."js/application.js"; ?>"></script>
<script type="text/javascript">
$(function(){
	jQuery('a[rel*=facebox]').facebox({
		closeImage: "<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH.'css/facebox/closelabel.gif';?>",
		loadingImage: "<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH.'css/facebox/loading.gif';?>"
	});
});
function display_move(id){
	var arr = $("#" + id + " tr");
	jQuery.each(arr, function(){
		$(this).children("td:first").html($("#middle_row").html());
	});
	$("#" + id + " tr:first td:first").html("<b>Order</b>");
	$("#" + id + " tr:eq(1) td:first").html($("#top_row").html());
	$("#" + id + " tr:last td:first").html($("#bottom_row").html());
}
/*function alter_order(order1, order2) {
	$('#form').val("move_image");
	$('#order1').val(order1);
	$('#order2').val(order2);
	$('#image_upload_form').submit();
}*/
function alter_order(order1, order2){
	$.post("<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH.'functions/reorder_images.php'?>", {order1: order1, order2: order2, uid: <?php echo $unit->id;?>, user: 'owner'}, function (data){
		if(data.error == 0){
			$("#images_display").html(data.html);
			alternate('images_display', 'even', 'odd');
			display_move('images_display');
			jQuery('a[rel*=facebox]').facebox({
				closeImage: "<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH.'css/facebox/closelabel.gif';?>",
				loadingImage: "<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH.'css/facebox/loading.gif';?>"
			});
		}
		else alert("error");
	}, "json");
}
function delete_image(id){
	if( confirm("Are you sure to delete this image?") ){
		$('#form').val("delete_image");
		$("#delete_image").val(id);
		$('#image_upload_form').submit();
	}
}
function save_caption(ele, id){
	var caption = ele.prev("INPUT").val();
	var span = ele.next("SPAN");
	span.css("display", "inline");
	$.post("<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH.'functions/save_caption.php';?>", { caption: caption, id: id },
	function(data){
		span.css("display", "none");
		if(data == "error") alert("Could not saved your data");
	});
}
</script>
<div id="images">
	<form action="" method="post" id="image_upload_form" name="image_upload_form" enctype="multipart/form-data">
	<table border="0" width="100%">
	  <tr>
	    <td colspan="2"><h2><?php echo $unit->address;?></h2></td>
	  </tr>
	  <tr>
	  	<td align="left" valign="middle">
		  	To add a picture, click browse, select the picture and click upload picture<br />
		  	<input type="file" name="upload_image" size="45" />
		  	<input type="submit" value="Upload Image">
	  	</td>
	  </tr>
	  <tr>
	  	<td>
	  		<table border="0" width="100%">
	  		<tbody id="images_display">
			  <tr>
			  	<td colspan="5"><b>Order</b></td>
			  </tr>	
			  <?php if(!empty($images)){?>
			  <?php foreach($images as $image){?>
			  <tr id="row_<?php echo $image->id;?>">
			    <td width="7%" class="CenterAlign">&nbsp;</td>
			    <td width="23%" class="CenterAlign">
			    	<input type="hidden" name="image_order" value="<?php echo $image->order;?>">
			    	<img src="<?php echo ADMIN_COMPONENT_PATH.$image->thumbnailurl;?>" alt="">
			    </td>
			    <td width="" valign="middle">Caption 
			    	<input type="text" size="40" name="caption" value="<?php echo $image->caption;?>" />
			    	<a href="javascript:void(0)" onclick="save_caption($(this), <?php echo $image->id;?>)"><img alt="save" src="<?php echo COMPONENT_PATH."images/save.jpg"?>"></a>
			    	<span class="Loader"><img alt="save" src="<?php echo COMPONENT_PATH."images/loading-icon.gif"?>"></span>
			   	</td>
			    <td width="5%" valign="middle"><a href="<?php echo ADMIN_COMPONENT_PATH.$image->photourl;?>" rel="facebox"><img alt="zoom" src="<?php echo COMPONENT_PATH."images/zoom.png"?>"></a></td>
			    <td width="5%" valign="middle" class="CenterAlign">
			    	<a href="javascript:void(0)" class="Delete" onclick="delete_image(<?php echo $image->id;?>)">
			    		<img alt="delete" src="<?php echo COMPONENT_PATH."images/cross.png"?>">
			    	</a>
			    </td>
			  </tr>
			  <?php }
			  }
			  ?>
			</tbody>
			</table>
			<div id="top_row" style="display:none;">
				<a href="javascript:void(0);" onclick="alter_order($(this).parent().parent().children('td:eq(1)').children('input').val(),$(this).parent().parent().next('tr').children('td:eq(1)').children('input').val())"><img src="<?php echo COMPONENT_PATH."images/downarrow.png"?>" alt="down" /></a>
			</div>
			<div id="middle_row" style="display:none;">
				<a href="javascript:void(0);" onclick="alter_order($(this).parent().parent().children('td:eq(1)').children('input').val(),$(this).parent().parent().prev('tr').children('td:eq(1)').children('input').val())"><img src="<?php echo COMPONENT_PATH."images/uparrow.png"?>" alt="up" /></a>&nbsp;
				<a href="javascript:void(0);" onclick="alter_order($(this).parent().parent().children('td:eq(1)').children('input').val(),$(this).parent().parent().next('tr').children('td:eq(1)').children('input').val())"><img src="<?php echo COMPONENT_PATH."images/downarrow.png"?>" alt="down" /></a></div>
			<div id="bottom_row" style="display:none;">
				<a href="javascript:void(0);" onclick="alter_order($(this).parent().parent().children('td:eq(1)').children('input').val(),$(this).parent().parent().prev('tr').children('td:eq(1)').children('input').val())"><img src="<?php echo COMPONENT_PATH."images/uparrow.png"?>" alt="up" /></a>
			</div>
			<script type="text/javascript">
				alternate('images_display', 'even', 'odd');
				display_move('images_display');
			</script>
			<div id="div1"></div>
	  	</td>
	  </tr>
	</table>
	<input type="hidden" name="order1" id="order1" value="">
	<input type="hidden" name="order2" id="order2" value="">
	<input type="hidden" name="delete_image" id="delete_image">
	<input type="hidden" id="form" name="form" value="upload_image">
	</form>
</div>
